<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/static/logo.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ApiCat</title>
  <style>
    .vertical-center,
    .vertical-bottom {
      width: 100%;
      height: 100%;
      white-space: nowrap;
    }

    .vertical-center:before,
    .vertical-bottom:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 0;
      height: 100%;
    }

    .vertical-center>* {
      vertical-align: middle;
      white-space: normal;
      display: inline-block;
    }

    .splash-container {
      color: #f8f9fa;
      width: 100%;
      text-align: center;
    }


    @keyframes r {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(45deg);
      }
    }

    svg.spin {
      animation: r 0.2s infinite linear;
      width: 70px;
      display: inline-block;
      vertical-align: middle;
    }

    #splash {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      color: #fff;
      z-index: 2147483647;
    }

    #splash.hidden {
      opacity: 0;
      z-index: -1;
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div id="app" class="min-h-screen">
    <div id="splash" class="vertical-center">
      <div class="splash-container">
        <svg class="spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path id="p" fill="#006bff"
            d="M94.1 58.8c.6-2.8.9-5.8.9-8.8s-.3-6-.9-8.8l-11.7-.4c-.7-2.6-1.7-5-3-7.3l8-8.5c-3.3-4.9-7.5-9.2-12.5-12.5l-8.5 8c-2.3-1.3-4.7-2.3-7.3-3l-.3-11.6C56 5.3 53 5 50 5s-6 .3-8.8.9l-.4 11.7c-2.6.7-5 1.7-7.3 3l-8.5-8c-4.9 3.3-9.2 7.5-12.5 12.5l8 8.5c-1.3 2.3-2.3 4.7-3 7.3l-11.6.3C5.3 44 5 47 5 50s.3 6 .9 8.8l11.7.4c.7 2.6 1.7 5 3 7.3l-8 8.5c3.3 4.9 7.5 9.2 12.5 12.5l8.5-8c2.3 1.3 4.7 2.3 7.3 3l.4 11.7c2.7.5 5.7.8 8.7.8s6-.3 8.8-.9l.4-11.7c2.6-.7 5-1.7 7.3-3l8.5 8c4.9-3.3 9.2-7.5 12.5-12.5l-8-8.5c1.3-2.3 2.3-4.7 3-7.3l11.6-.3zM50 66.9c-9.3 0-16.9-7.6-16.9-16.9S40.7 33.1 50 33.1 66.9 40.7 66.9 50 59.3 66.9 50 66.9z">
          </path>
        </svg>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>
